<template>
	<view class="page">
		<view class="title">
			为了更好的为您服务，请您务必填写真实信息
		</view>
		<view class="form">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<!-- 拍品名称及主图 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">拍品名称及主图:</span>
					</template>
				</u-form-item>
				<uni-forms-item prop="userInfo.firm">
					<u--input placeholder="请输入拍品名称" border="none" v-model="value1"></u--input>
				</uni-forms-item>

				<u-form-item borderBottom>
					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10">
					</u-upload>
				</u-form-item>

				<!-- //视频文件 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">视频文件:</span>
					</template>

				</u-form-item>
				<u-form-item prop="userInfo.video" borderBottom>
					<u-upload :fileList="fileList2" @afterRead="afterRead" @delete="deletePic" name="2" multiple
						:maxCount="10" accept="video"></u-upload>
				</u-form-item>
				<!-- 拍卖品图册 -->
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-bottom: 120rpx;font-weight: bold;">拍品图册:</span>
					</template>

				</u-form-item>
				<u-form-item prop="userInfo.video" borderBottom>
					<u-upload :fileList="fileList3" @afterRead="afterRead" @delete="deletePic" name="3" multiple
						:maxCount="10" :previewFullImage="true"></u-upload>
				</u-form-item>

				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">拍品价:</span>
					</template>
					<u--input v-model="model1.userInfo.price" placeholder="请输入拍品价格" border="none"></u--input>
				</u-form-item>
				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">拍品电话:</span>
					</template>
					<u--input placeholder="请输入拍品电话" border="none"></u--input>
				</u-form-item>
				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">加价幅度:</span>
					</template>
					<u--input border="none"></u--input>
				</u-form-item>



				<u-form-item prop="userInfo.free" borderBottom @click="showFree= true; hideKeyboard()" ref="item1">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">是否包邮:</span>
					</template>
					<u--input v-model="model1.userInfo.free" disabled placeholder="请选择是否包邮" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item prop="userInfo.free" borderBottom @click="isTake= true; hideKeyboard()" ref="item1">
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">能否上门自取:</span>
					</template>
					<u--input v-model="model1.userInfo.take" disabled placeholder="请选择是否上门自取" border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">邮费:</span>
					</template>
					<u--input border="none"></u--input>
				</u-form-item>


				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">拍品介绍:</span>
					</template>
				</u-form-item>
				<uni-forms-item prop="userInfo.firm" borderBottom>
					<u--textarea v-model="value1" placeholder="请输入拍品介绍" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>
				<u-form-item>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="font-weight: bold;">注意事项:</span>
					</template>
				</u-form-item>
				<uni-forms-item prop="userInfo.firm" borderBottom>
					<u--textarea v-model="value1" placeholder="请输入注意事项" height="80" maxlength="150" count="true"
						border="bottom"></u--textarea>
				</uni-forms-item>
				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 20rpx;font-weight: bold;">上传费:</span>
					</template>
					<u--input border="none" placeholder="100元"></u--input>
				</u-form-item>
				<u-form-item prop="userInfo.firm" borderBottom>
					<template #label class="title">
						<span style="color: red;">*</span>
						<span style="margin-right: 500rpx;font-weight: bold;">参数:</span>
					</template>
					<text style="color: #d1a969;" @click="showDialog = true"> 添加参数</text>

				</u-form-item>
			</u--form>
			<u-action-sheet :show="showFree" :actions="actions" title="请选择是否包邮" @close="showFree = false"
				@select="freeSelect">
			</u-action-sheet>
			<!-- //是否上门 -->
			<u-action-sheet :show="isTake" :actions="columns" title="请选择是否上门" @close="isTake = false"
				@select="takeSelect">
			</u-action-sheet>
			<view class="custom-button" @tap="submit">提交</view>
			<!-- 参数 -->
			<u-popup :show="showDialog" @close="close" @open="open">
				<view class="popup-content">
					<view class="title">
						添加参数
					</view>
					<view class="item1">
						<text>参数名：</text>
						<u-input v-model="paramName" border="bottom" placeholder="请输入" />
					</view>
					<view class="item1">
						<text>参数内容：</text>
						<u-input v-model="paramContent" border="bottom" placeholder="请输入" />
					</view>
					<view class="button-group">
						<view class="item item1" @click="submit" type="primary">提交</view>
						<view class="item item2" @click="cancel">取消</view>
					</view>
				</view>
			</u-popup>

		</view>



	</view>


</template>

<script>
	export default {
		data() {
			return {
				value1: '',
				value2: '',
				showDialog: false, // 控制弹框的显示与隐藏
				paramName: '',
				paramContent: '', // 用于存储输入的参数名
				isTake: false,
				selectedLabel: '',
				fileList2: [],
				fileList3: [{
					url: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}],
				showFree: false,
				fileList1: [],
				model1: {
					userInfo: {
						firm: '',
						price: '',
						free: '',
					},
				},
				columns: [{
					name: '能'
				}, {
					name: '不能'
				}],
				actions: [{
						name: '包邮',
					},
					{
						name: '不包邮',
					},

				],
				rules: {
					'userInfo.firm': {
						type: 'string',
						required: true,
						message: '请填写公司名称',
						trigger: ['blur', 'change']
					},
					'userInfo.free': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择是否包邮',
						trigger: ['blur', 'change']
					},
				},
				radio: '',
				switchVal: false
			};
		},
		methods: {

			freeSelect(e) {
				this.model1.userInfo.free = e.name
				this.$refs.uForm.validateField('userInfo.free')
			},
			takeSelect(e) {
				this.model1.userInfo.take = e.name
				this.$refs.uForm.validateField('userInfo.')
			},
			onReady() {
				//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
				this.$refs.uForm.setRules(this.rules)
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
			submit() {},
			//键盘已隐藏
			hideKeyboard() {
				// 这里是隐藏键盘的逻辑
				console.log("键盘已隐藏");
				// 具体实现方式，依赖于你的需求
			},
			submit() {
				if (this.paramName) {
					// 处理提交逻辑
					console.log("提交的参数名:", this.paramName);
					this.showDialog = false; // 关闭弹框
					this.paramName = ''; // 清空输入框
				} else {
					this.$u.toast("参数名不能为空！"); // 提示用户输入参数名
				}
			},
			cancel() {
				this.showDialog = false; // 关闭弹框
				this.paramName = ''; // 清空输入框
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			}
		}
	}
</script>

<style scoped lang="scss">
	.form {

		padding: 0 20rpx;

	}

	.title {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		align-items: center;
		background-color: #ffebeb;
		color: red;
		padding: 0 20rpx;
	}

	.custom-button {
		background-color: #d1a969;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		/* 设置按钮的背景颜色 */
		color: #fff;
		border-radius: 40rpx;
		margin: 20rpx;
	}

	.popup-content .item1 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 0;
	}

	.popup-content .title {
		margin-top: 20rpx;
		text-align: center;
	}

	.popup-content .button-group {
		display: flex;
		margin-top: 30rpx;
	}

	.popup-content .button-group .item {
		width: 300rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: fff;
		border-radius: 40rpx;
		background-color: $base;
		margin: 0 40rpx;
	}
</style>